<template>
    <div>
  
      <myheader></myheader>
      <section class="featured-block text-center">
          <div class="container">
              <div class="row">
                  <div class="col-md-6 text-center">
                      <div class="product-image mt-3">
                          <img class="img-fluid" :src="img">
                      </div>
                      <div class="product-thumbnails"><a href="#">
                          <img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
                          <a href="#">
                              <img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
                          <a href="#">
                              <img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
                          <a href="#">
                              <img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
                          <a href="#">
                          <img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
                          <div style="font-size: large;">
                              <Button :circle='true' @click='goodfollow' >{{gzbutton}}</Button>
                          </div>
                      </div>
                  </div>
                  <div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
                      <h2 class="mb-3 mt-0">{{name}}</h2>
                      <p class="lead mt-2 mb-3 primary-color">${{price}}</p>
                      <h5 class="mt-4">Description</h5>
                      <p>{{desc}}</p>
                      <p>颜色：{{color}}</p>
                      <p>大小：{{size}}</p>
                      <p>季节：{{season}}</p>
                      <h5 class="mt-5">Care Instructions</h5>
                      <p>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
                      <select class="custom-select form-control mt-4 mb-4">
                          <option selected>Size</option>
                          <option value="1">Small</option>
                          <option value="2">Medium</option>
                          <option value="3">Large</option>
                      </select>
                      
                      <!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
                      
                      <a href="#" class="btn btn-full-width btn-lg btn-outline-primary">Add to cart</a></div>
              </div>
          </div>
      </section>
      
      <div class="divider"></div>
  
      <section class="featured-block text-center">
          <div class="container">
              
          </div>
      </section>
      
      <div class="divider"></div>
      
      <section class="products text-center">
          <div class="container">
              <h3 class="mb-4">Related Products</h3>
              <div class="row">
                  <div class="col-sm-6 col-md-3 col-product">
                      <figure>
                          <img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
                          <figcaption>
                              <div class="thumb-overlay"><a href="#" title="More Info">
                                  <i class="fas fa-search-plus"></i>
                              </a></div>
                          </figcaption>
                      </figure>
                      <h4><a href="#">Product Name</a></h4>
                      <p><span class="emphasis">$19.00</span></p>
                  </div>
                  <div class="col-sm-6 col-md-3 col-product">
                      <figure>
                          <img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
                          <figcaption>
                              <div class="thumb-overlay"><a href="#" title="More Info">
                                  <i class="fas fa-search-plus"></i>
                              </a></div>
                          </figcaption>
                      </figure>
                      <h4><a href="#">Product Name</a></h4>
                      <p><span class="emphasis">$19.00</span></p>
                  </div>
                  <div class="col-sm-6 col-md-3 col-product">
                      <figure>
                          <img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
                          <figcaption>
                              <div class="thumb-overlay"><a href="#" title="More Info">
                                  <i class="fas fa-search-plus"></i>
                              </a></div>
                          </figcaption>
                      </figure>
                      <h4><a href="#">Product Name</a></h4>
                      <p><span class="emphasis">$19.00</span></p>
                  </div>
                  <div class="col-sm-6 col-md-3 col-product">
                      <figure>
                          <img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
                          <figcaption>
                              <div class="thumb-overlay"><a href="#" title="More Info">
                                  <i class="fas fa-search-plus"></i>
                              </a></div>
                          </figcaption>
                      </figure>
                      <h4><a href="#">Product Name</a></h4>
                      <p><span class="emphasis">$19.00</span></p>
                  </div>
              </div>
          </div>
      </section>
      
      <myfooter></myfooter>
      
    </div>
    
  </template>
  
  
   
  <script>
  import myheader from './myheader';
  import myfooter from './myfooter';
  
  export default {
      name:'guanzhu',
      data () {
      return {
          name:'',
          price:0,
          desc:'',
          img : '',
          color:"",
          size:'',
          season:'',
          myuserdict:{},
          
          guanzhu:[],
          count:'',
          //关注按钮状态
          type:0,
          gzbutton:'+关注'
          }
      },
      components:{
          'myheader':myheader,
          'myfooter':myfooter,
      },
      beforeCreate() {
          window.that  = this;
      },
      mounted:function(){
          this.axios({
              url:'http://127.0.0.1:8000/gooditem/',
              params:{
                  gid:this.$route.query.gid
              }
          }).then(resp=>{
              // console.log(resp)
              this.name = resp.data.data.name;
              this.price = resp.data.data.price;
              this.desc = resp.data.data.desc;
              this.img = 'http://127.0.0.1:8000/static/upload/'+resp.data.data.img;
              var parms = resp.data.data.parms;
              //转换
              parms = JSON.parse(parms)
              this.color = parms.color
              this.size = parms.size
              this.season = parms.season
          })
      this.goodfollow();
  },
      methods:{
          //商品被多少人关注
          goodfollow(){
              if (this.type == 1) {
                  this.gzbutton = '已关注'
                  this.type = 0

              }
              else if(this.type ==0){
                  this.gzbutton = '+关注'
                  this.type = 1

              }
              this.axios.get("http://127.0.0.1:8000/goodfollow_exam/",{params:{gid:this.$route.query.gid,uid:localStorage.getItem("uid"),type:this.type}}).then(resp=>{
                console.log(resp)
                    if (resp.data.code ==200) {
                        
                        this.$Message(resp.data.message)
                        this.type = resp.data.type
                    }  
                  if (resp.data.code ==403) {
                    this.$Message(resp.data.message);
				}
              })
          },
  },
      filters:{
          myfilter(value){
              //通过key（用户id）取用户名
              return window.that.myuserdict[value];
          }
  },
  
  }
      
  </script>
  
  <style>
  
  
  
  </style>